<template>
  <div class="container">
    <div class='login_content'>
      <div class='user_photo'><open-data type="userAvatarUrl"></open-data></div>
      <div class='user_nickname'><open-data type="userNickName"></open-data></div>
      <form class="login_btn" v-if="canIUse" @submit='registerFormSubmit' report-submit='true'>
        <button  form-type='submit' open-type="getUserInfo" @click="bindGetUserInfo">点击授权登录</button>
      </form>
      <div v-else>请升级微信版本</div>
      <!-- <button @click="navigateToHome">返回首页</button> -->
    </div>
  </div>
</template>
<script>
import { postCode } from '../../../api/index.js'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo'), //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    }
  },
  methods: {
    ...mapActions(['_reqUserInfo']),
    bindGetUserInfo(e){
      var This = this;
      let code = this.$store.state.userCode;
      wx.getUserProfile({
        lang : 'zh_CN',
        desc: '获取用户信息',
        success : res => {
          This.$store.dispatch('_setWXUserInfo',res); //将用户信息保存的VUEX
          let params = {
            raw_data:res.rawData,
            signature:res.signature,
            code:code
          };
          //发送code到服务器获取数据
          postCode(params).then(respones => {
            if(respones.data.level=="success"){
              wx.setStorageSync('userToken',respones.data.data);
              This.reqRecordFormId();
              console.log(respones.data)
              if(respones.data.action == 'bind'){
                // wx.reLaunch({
                //   url:"/pages/homeMain/setPhone/main"
                // })
                This._reqUserInfo();//获取后端用户信息
              }else{
                wx.reLaunch({
                  url:"/pages/homeMain/home/main"
                })
                This._reqUserInfo();//获取后端用户信息
              }
            }else{
              wx.showToast(respones.data.message,'none',1000)
            }
          })
        },
        fail : res => {
          console.log('错误消息',res)
        }
      })

      /*wx.getSetting({//检查用户是否授权
        success (res) {
          if(res.authSetting['scope.userInfo']){

          }else{
            wx.reLaunch({
              url:"/pages/homeMain/home/main"
            })
          }
        }
      })*/
    },
    registerFormSubmit(e) {
      if(e.mp.detail.formId){
        this.formId = e.mp.detail.formId
      }
    },
    async reqRecordFormId(){
      var userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
        form_id: this.formId
      }
      let res = await this.$api.postRecordFormId(params);
      if(res.data.level == "success"){

      }else{
        wx.showToast({
          title: 'formId记录失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_content{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -100rpx;
    .login_btn{
      width: 100%;
    }
    .user_photo{
      width: 150rpx;
    }
    .user_nickname{
      text-align: center;
      margin-top: 20px;
    }
    button{
      font-size: 14px;
      margin-top: 30rpx;
      border-radius: 10rpx;
      width: 54%;
      background-color: green;
      color: #fff;
    }
  }
}
</style>
